import React, {useState,useEffect} from 'react'
import { View, Text,ScrollView } from '@tarojs/components'
import store from "../../../../store";
import './index.scss'
function LeftNavigation ({leftNavList,changeNavListIndex}) {

  const [navListIndex,useNavListIndex] = useState(store.getState().navListIndex)
    useEffect(() => {
        // 添加订阅方法
        store.subscribe(storeChange)
        return () => {
          // console.log('取消订阅')
        }
    },[])
  // 声明改变数据的方法
    function storeChange(){
      useNavListIndex(store.getState().navListIndex)
    }
    function changeNavIndex(index){
      const action = {
        type:'change_if_nav',
        index
      }
      store.dispatch(action)
    }
    return (
      <ScrollView
        scrollY
        className='left_navigation'>
        {
          leftNavList.map((item,index) => {
           return (
             <View className={`nav_item ${index === navListIndex? 'isShowLeftNav':''}`} key={index} onClick={() => {changeNavIndex(index)}}>
               <Text className='nav_item_te'>{item.leftText}</Text>
             </View>
           )
          })
        }
      </ScrollView>
    )
}


export default LeftNavigation
